<template>
    <div class="register_container">
        <div class="top">
            <div class="title">
                {{ detailStore.hospitalInfo.hospital?.hosname }}
            </div>
            <div class="grade">
                <el-icon color="lightcoral">
                    <StarFilled />
                </el-icon>
                <span>{{ detailStore.hospitalInfo.hospital?.param.hostypeString }}</span>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <img :src="detailStore.hospitalInfo.hospital?.logoData ? `data:image/jpeg;base64,` + detailStore.hospitalInfo.hospital?.logoData : ''"
                    :alt="detailStore.hospitalInfo.hospital?.hosname" />
            </div>
            <div class="right">
                <div class="content_right-title">挂号规则</div>
                <div class="time">
                    预约周期:10天 放号时间:
                    <span>
                        {{ detailStore.hospitalInfo.bookingRule?.releaseTime }}
                    </span>
                    停挂时间:
                    <span>
                        {{ detailStore.hospitalInfo.bookingRule?.stopTime }}
                    </span>
                </div>
                <div class="address">
                    具体地址: <span>{{ detailStore.hospitalInfo.hospital?.param.fullAddress }}</span>
                </div>
                <div class="route">
                    具体路线: <span>{{ detailStore.hospitalInfo.hospital?.route }}</span>
                </div>
                <div class="releaseTime">
                    退号时间: 就诊前一工作日
                    <span>
                        {{ detailStore.hospitalInfo.bookingRule?.releaseTime }}
                    </span>
                    前取消
                </div>
                <div class="content_right-title">预约挂号规则</div>
                <div class="ruleInfo" v-for="(item, index) in detailStore.hospitalInfo.bookingRule?.rule" :key="index">
                    {{ index + 1 }}
                    .
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="deparment">
            <div class="leftNav">
                <ul>
                    <li @click="changeIndex(index)" :class="{ active: currentIndex === index }"
                        v-for="(item, index) in detailStore.deparmentArr" :key="item.depcode">
                        {{ item.depname }}
                    </li>
                </ul>
            </div>
            <div class="deparmentInfo">
                <!-- 用一个div代表:大科室与小科室 -->
                <div class="showDeparment">
                    <div v-for="(item, index) in detailStore.deparmentArr" :key="item.depcode">
                        <h2 ref="cur" :class="{ active: currentIndex === index }">{{ item.depname }}</h2>
                        <!-- 每一个大的科室下小科室 -->
                        <ul>
                            <li @click="showLogin(smallDepartment)" v-for="smallDepartment in item.children"
                                :key="smallDepartment.depcode">
                                {{ smallDepartment.depname }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { ref } from 'vue';
import { StarFilled } from '@element-plus/icons-vue';
import useDetailStore from '@/store/modules/hospitalDetail';
import { useRouter, useRoute } from 'vue-router';
// import useUserStore from '@/store/modules/user'
let detailStore = useDetailStore()
// let userStore = useUserStore()
let $router = useRouter()
let $route = useRoute()
// 控制科室高亮的响应式数据
let currentIndex = ref<number>(0)
let cur = ref()

// 左侧大的科室点击事件
const changeIndex = (index: number) => {
    currentIndex.value = index
    cur.value[index].scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
}
// 点击登陆与注册按钮的时候弹出对话框
const showLogin = (item: any) => {
    $router.push({
        path: '/hospital/register_step1',
        query: {
            hoscode: $route.query.hoscode,
            depcode: item.depcode
        }
    })
}
</script>
<style scoped lang="scss">
.register_container {
    .top {
        display: flex;
        align-items: center;
        margin-bottom: 32px;

        .title {
            font-size: 24px;
            margin-right: 16px;
        }

        .grade {
            display: flex;
            align-items: center;

            span {
                margin-left: 2px;
                color: lightcoral;
            }
        }
    }

    .content {
        display: flex;

        .left {
            margin-right: 16px;

            img {
                width: 100px;
                height: 100px;
                object-fit: cover;
                border-radius: 6px;
            }
        }

        .right {
            .content_right-title {
                margin-bottom: 10px;
                font-weight: 500;
            }

            .time,
            .address,
            .route,
            .releaseTime,
            .ruleInfo {
                color: #7f7f7f;
                margin-bottom: 6px;
                font-size: 14px;

                span {
                    color: lightcoral;
                }
            }

            .releaseTime {
                margin-bottom: 10px;
            }
        }
    }

    .deparment {
        margin-top: 24px;
        width: 100%;
        display: flex;
        color: #7f7f7f;

        .leftNav {
            width: 100px;

            li {
                padding: 10px;
                text-align: center;
                background-color: rgb(248, 248, 248);
                cursor: pointer;
            }
        }

        .deparmentInfo {
            flex: 1;

            .showDeparment {
                max-height: 432px;
                overflow: auto;

                &::-webkit-scrollbar {
                    display: none;
                }

                h2 {
                    padding: 10px;
                    background-color: rgb(248, 248, 248);
                    border-left: 0 !important;
                }

                ul {
                    padding: 16px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    li {
                        margin: 4px 0;
                        width: 33%;
                        cursor: pointer;
                    }

                    li:hover {
                        color: lightcoral;
                    }
                }
            }
        }
    }
}

@media (max-width:1280px) {
    .content {
        .left {
            img {
                width: 80px !important;
                height: 80px !important;
            }
        }
    }
}

@media (max-width:768px) {
    .register_container {
        .top {
            flex-direction: column;

            .title {
                font-size: 18px;
                margin: 0;
                margin-bottom: 8px;
            }

            .grade {
                font-size: 14px;
            }
        }

        .content {
            flex-direction: column-reverse;

            .left {
                margin: 20px 0 0 !important;
                text-align: center !important;

                img {
                    width: 100px !important;
                    height: 100px !important;
                }
            }
        }

        .deparment {
            .leftNav {
                width: 90px;

                li {
                    padding: 6px;
                    font-size: 14px;
                }
            }

            .deparmentInfo {
                .showDeparment {
                    max-height: 312px;

                    h2 {
                        padding: 6px;
                        font-size: 14px;
                    }

                    ul {
                        padding: 6px;
                        flex-wrap: nowrap !important;
                        flex-direction: column;
                        text-align: center;

                        li {
                            font-size: 14px;
                            width: 100%;
                        }
                    }
                }
            }
        }

    }
}

.active {
    border-left: 1px solid lightcoral;
    color: lightcoral !important;
    background-color: lightyellow !important;
}
</style>
  